<template>
  <div class="home" id="homeView">
    <div class="box">
      <button class="box-btn" @click="showInfoMessageBoxFn">info-fn</button>
      <button class="box-btn" @click="showSuccessMessageBoxFn">success-fn</button>
      <button class="box-btn" @click="showWarnMessageBoxFn">warn-fn</button>
      <button class="box-btn" @click="showDangerMessageBoxFn">danger-fn</button>
      <button class="box-btn" @click="showInfoMessageBox">info</button>
      <button class="box-btn" @click="showSuccessMessageBox">success</button>
      <button class="box-btn" @click="showWarnMessageBox">warn</button>
      <button class="box-btn" @click="showDangerMessageBox">danger</button>
    </div>
    <div class="carousel-box">
      <button @click="changeCarousel('carousel')" class="carousel-car">carousel</button>
      <button @click="changeCarousel('slider')"class="slider-car">slider</button>
      <button @click="removeCarousel">removeCarousel</button>
    </div>
    <city></city>
  </div>
</template>

<script>
import { MessageBoxClass, Carousel, Slider } from '@/components';
import City from '@/components/City/index.vue';
export default {
  name: "HomeView",
  components: {
    City
  },
  data() {
    return {
      messageBoxClass: null,
      carousel: null,
      carouselOptions: {
        speed: 1000,
      },
      carouselType: 'carousel',
      deviceInfo: null,
      list: [1,2,3,4,5,6]
    }
  },
  async mounted() {
    // 初始化轮播图
    // this.initCarousel();
    this.run();
  },
  methods: {
    queryInfo() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log('deviceInfo-query');
          resolve()
        }, 3000)
      })
    },
    async getDeviceInfo() {
      let result = await this.queryInfo().then(res => {
        return res
      })
      return result
    },
    queryVillageData() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log('queryVillageData');
          resolve();
        }, 1000)
      })
    },
    run() {
      let queryVillageList = [];
      let queryVillageList2 = []
      this.list.forEach((item, index) => {
          queryVillageList.push(this.getDeviceInfo());
      })
      Promise.all(queryVillageList).then((res) => {
        res.forEach(item => {
          queryVillageList2.push(this.queryVillageData())
        })
        Promise.all(queryVillageList2).then(res => {
          console.log('狂选');
        })
      })
    },
    showInfoMessageBoxFn() {
      this.$messageBox.show(
        {
          type: 'info',
          title: 'this is title-info',
          content: 'this is content-info',
        },
        function() {
          console.log('callback-show-info');
        }
      )
    },
    showSuccessMessageBoxFn() {
      this.$messageBox.show(
        {
          type: 'success',
          title: 'this is title-success',
          content: 'this is content-success',
        },
        function() {
          console.log('callback-show-success');
        }
      )
    },
    showWarnMessageBoxFn() {
      this.$messageBox.show(
        {
          type: 'warn',
          title: 'this is title-warn',
          content: 'this is content-warn',
        },
        function() {
          console.log('callback-show-warn');
        }
      )
    },
    showDangerMessageBoxFn() {
      this.$messageBox.show(
        {
          type: 'danger',
          title: 'this is title-danger',
          content: 'this is content-danger',
        },
        function() {
          console.log('callback-show-danger');
        }
      )
    },
    showInfoMessageBox() {
      this.messageBoxClass.showInfo();
    },
    showSuccessMessageBox() {
      this.messageBoxClass.showSuccess();
    },
    showWarnMessageBox() {
      this.messageBoxClass.showWarn();
    },
    showDangerMessageBox() {
      this.messageBoxClass.showDanger();
    },
    initCarousel() {
      this.carousel = new Carousel(this.carouselOptions);
    },
    changeCarousel(type) {
      let typeOptions = {
        carousel: Carousel,
        slider: Slider,
      }
      this.carouselType = type;
      this.removeCarousel();
      this.carousel = new typeOptions[type](this.carouselOptions);
    },
    removeCarousel() {
      this.carousel && this.carousel.remove();
      this.carousel = null;
    }
  }
};
</script>
